<template>
  <n-form ref="formRef" label-placement="left" label-width="auto" v-model:model="queryParam">
    <n-grid x-gap="12" :cols="4">
      <n-form-item-gi label="商品名称" path="goodsName">
        <n-input clearable type="text" placeholder="请输入" v-model:value="queryParam.goodsName"/>
      </n-form-item-gi>
      <n-form-item-gi label="商品状态" path="goodsStatus">
        <n-select
            v-model:value="queryParam.goodsStatus"
            placeholder="Select"
            :options="[{label:'上架', value:1}, {label: '下架', value: 0}]"
        />
      </n-form-item-gi>
      <n-form-item-gi>
        <n-button type="primary" @click="loadGoodsList"> 搜索</n-button>
      </n-form-item-gi>
    </n-grid>
  </n-form>

  <n-space vertical :size="12">
    <n-data-table
        size="small"
        :columns="columns"
        :data="goodsStore.goodsList"
    />
    <n-pagination v-model:page="goodsStore.pageInfo.pageNum"
                  :page-count="goodsStore.pageInfo.totalPage" :on-update:page="changePageSize"/>
  </n-space>
</template>

<script setup>
import {
  NButton,
  NDataTable,
  NForm,
  NFormItemGi,
  NGrid,
  NInput,
  NPagination,
  NPopconfirm,
  NSelect,
  NSpace
} from "naive-ui";
import {computed, h, onBeforeMount, reactive} from "vue";
import {useGoodsStore} from "@/store/goods";
import GoodsInfo from "@/views/goods/info.vue"
import {useRouter} from "vue-router";
import {reqGoodsStatusUpdate} from "@/api";

const router = useRouter()

const columns = [
  {
    title: '商品信息', key: 'ProductInfo', render(row) {
      return h(
          GoodsInfo,
          {
            detail: row,
          }
      )
    }
  },
  {title: '商品分类', key: 'firstCateName'},
  {title: '价格', key: 'goodsPrice'},
  {title: '销量', key: 'realSalesValue'},
  {title: '创建时间', key: 'createdTime'},
  {
    title: '操作', key: 'action', render(row) {
      return h(NSpace, {warp: true}, () => [
        h(NButton, {type: 'primary', text: true, onClick: () => editGoods(row)}, () => '编辑'),
        row.goodsStatus === 1 ?
            h(NPopconfirm, {
              onPositiveClick: () => updateGoodsStatus(row.id, 0), placement: 'left',
              positiveText: "确认", negativeText: '取消'
            }, {
              default: () => '商品下架后将无法下单，确认下架？',
              trigger: () => h(NButton, {type: 'primary', text: true}, () => '下架')
            })
            : [h(NPopconfirm, {
              onPositiveClick: () => updateGoodsStatus(row.id, 1), placement: 'left',
              positiveText: "确认", negativeText: '取消'
            }, {
              default: () => '确认上架？',
              trigger: () => h(NButton, {type: 'primary', text: true}, () => '上架')
            }),
              h(NPopconfirm, {
                onPositiveClick: () => updateGoodsStatus(row.id, 2), placement: 'left',
                positiveText: "确认", negativeText: '取消'
              }, {
                default: () => '确认删除？',
                trigger: () => h(NButton, {type: 'primary', text: true}, () => '删除')
              }),
            ],
      ])
    }
  },
]
const goodsStore = useGoodsStore()

const queryParam = reactive({
  goodsName: "",
  goodsStatus: 1,
  pageNum: 1,
  pageSize: 8,
})

async function changePageSize(page) {
  queryParam.pageNum = page
  await goodsStore.loadGoodsList(queryParam)
}

async function loadGoodsList() {
  queryParam.pageNum = 1
  await goodsStore.loadGoodsList(queryParam)
}

function editGoods(goodsInfo) {
  router.push({name: 'Goods-Edit', query: {id: goodsInfo.id}})
}

async function updateGoodsStatus(goodsId, status) {
  await reqGoodsStatusUpdate({goodsId, status})
  await goodsStore.loadGoodsList(queryParam)
}

onBeforeMount(async () => await goodsStore.loadGoodsList(queryParam))
</script>